<template>
  <div>
      <div class="rongqi">
        <div class="caidanming"><strong>医学知识库 /</strong>常见疾病知识库</div>  
      <div class="title">常见疾病知识库</div>
          <div class="buju">
              
        <!-- 树形控件和局部组件的布局容器 -->
        <div class="baorong">
          <!-- 树形控件 -->
    <div class="buju1">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
    ></el-tree>
    </div>
    <div class="youdiv">
    <!-- 内容区域的头部 -->
    <div class="tou">
        <div class="wen">常见疾病知识库</div></div>
    <!-- 局部组件区域 -->
    <div class="buju2">
        qqqqqq
        <assembly-Item></assembly-Item>
        </div>
        </div>
        </div>
  </div>
  </div>
  </div>
</template>
<script>
// 引入局部组件
import AssemblyItem from '../components/Assembly';
export default {
    // 局部组件
    components:{
AssemblyItem,
    },
    // 树形控件
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
  data() {
    return {
      filterText: '',
      data: [
        {
            // 一级菜单
          id: 1,
          label: '内科',
          children: [
            {
                // 二级菜单
              id: 4,
              label: '感冒',
              children: [
                {
                    // 三级菜单
                  id: 10,
                  label: '流行性感冒',
                },
                {
                  id: 11,
                  label: '病毒性感冒',
                },
                {
                    id: 12,
                    label:'风热性感冒',
                }
              ],
            },{
                 // 二级菜单
                 id: 5,
              label: '发热',
              children: [
                {
                  id: 13,
                  label: '积食型发热',
                },
                {
                  id: 14,
                  label: '风寒发热',
                },
                {
                    id: 15,
                    label:'炎症低热',
                }
              ],
            }
          ],
        },
        {
             // 一级菜单
          id: 2,
          label: '耳鼻喉科',
          children: [
            {
              id: 6,
              label: '耳鸣',
            },
            {
              id: 7,
              label: '鼻炎',
            },
          ],
        },
        {
             // 一级菜单
          id: 3,
          label: '心血管内科',
          children: [
            {
                 // 二级菜单
              id: 8,
              label: '冠心病',
               children: [
                {
                  id: 16,
                  label: '急性心脏病',
                },
                {
                  id: 17,
                  label: '先天性心脏病',
                },
              ],
            },
            {
                 // 二级菜单
              id: 9,
              label: '头痛',
               children: [
                {
                  id: 18,
                  label: '伤风头痛型',
                },
                {
                  id: 19,
                  label: '风寒头痛型',
                },
                 {
                  id: 20,
                  label: '感冒恢复期头痛',
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    };
  },
};
</script>
<style scoped>
*{
    padding: 0;
    margin: 0;
}
.rongqi{
    width: 100%;
    height: 1000px;
    background: rgb(218, 218, 170);
}
.tou{
    width: 100%;
    height: 80px;
    /* background: violet; */
}
.wen{
    width: 240px;
    height: 40px;
    color: white;
   line-height: 40px;
   text-align: center;
    background-color: rgb(17, 153, 85);
    position: absolute;
    right: 210px;
    top: 0px;
}
/* 左侧树状控件和右侧组件区域的布局 */
.baorong{
  width: 100%;
  height: 1000px;
}
.buju1{
    width: 28%;
    height: 850px;
    border: 1px solid royalblue;
}
/* 树形控件的文字 */
 .el-tree >>>.el-tree-node__label{
    font-size: 18px !important;
}
/* 树形控件的每行高度 */
 .el-tree >>>.el-tree-node__content{
 height: 40px  !important;
}
/* 树形控件的悬浮色 */
.el-tree >>>.el-tree-node__content:hover{
    border-left: 2px solid #39b9ae;
    background-color: rgb(248, 246, 246);
}

.buju2{
    display:inline-block;
    width:100%;
    height: 700px;
    border: 1px solid royalblue;
    position: absolute;
    right: 0px;
    top: 100px;
}
.youdiv{
  width: 45%;
  height: 800px;
  border: 1px solid red;
     position: absolute;
    right: 130px;
    top: 205px;

}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}
</style>